<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>我的</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../icon/iconfont.css" />
    <style>
          .top {
            background-size: 100% 100%;
            background-repeat: no-repeat;
            height: 14rem;
            background-image: url("../image/img/member-top.jpg");
            padding-top: 0.8rem
        }

        .top .info,
        .item {
            height: 64%;
            display: flex;
            justify-content: space-around;
            align-items: center;
            text-align: center;
        }

        .item {
            height: 36% !important;
        }

        .item .item-num {
            color: #E3C49B;
            font-size: .8rem;
        }

        .item .item-title {
            color: #666;
        }

        .aubtn {
            padding: .1rem 1rem;
            background-color: #E3C49B;
            border-radius: .2rem;
        }

        .title {
            color: #E3C49B;
        }

        .Jnum,
        .Ynum {
            color: #FFF;
            padding: .2rem 0;
        }
        #messageList{
          font-size:1.35rem; color:#FFF;position: absolute;right:15px;top:0.5rem
        }
        #yueBtn{
          display: none;
        }
        .bots{
          right: 15px;
          position: absolute;
          width: 10px;
          height: 10px;
          background: red;
          border-radius: 50%;
          top: 1.5rem;
          z-index: 1;
          display: none;
        }
        #isUsertype{
          display: none;
        }
        .slide-box{

            height:35px;
            display: -webkit-box;
            overflow-x: scroll;
            -webkit-overflow-scrolling:touch;
        }
        .slide-item{
            padding:5px 10px;
            height: 35px;
        }
        body,p { margin:0; padding:0;}
        .concent { margin:50px auto; width:100%; max-width:750px; min-width:320px; }
        .box { white-space:nowrap; overflow-x:auto; }	/*注释1*/
        .box::-webkit-scrollbar { width:0; height:0; display: none; } /*注释2*/
        .box div { list-style:none; display:inline-block; width:100px; line-height:30px; margin-right:10px;
        background:#ccc; text-align:center; }	/*注释3*/
        .box p { width:100%; height:50px; background:pink; }
        .box div:last-child { margin:0; }


        .aui-row>div{
          border-right: 1px solid #efefef;
          border-bottom: 1px solid #efefef;
        }
        .aui-col-xs-4{
          height: 6rem;
        }

        .nodata{
          height: 80%;
          background-image: url('../image/nologin1.jpg');
          background-position: center;
          background-size: cover;
          background-repeat: no-repeat;
        }
    </style>
</head>

<body>
    <div class="member">
      <em class='bots'></em>
        <span class="iconfont icon-pinglunzhuanhuan" id="messageList" onclick="gotoItem('message')"></span>
        <div class="top">
            <div class="info">
                <div style="text-align: center; font-size:.8rem">
                    <div class="title">积分</div>
                    <div class="Jnum" id="jifen"></div>
                    <div class="aubtn" onclick="gotoItem('exchange')">兑换</div>
                </div>
                <div style="margin-top:3rem;">
                    <div>
                        <img id="userlogo" style="width:5rem;height:5rem;border-radius: 50%"  src="" alt="" onclick="api.openWin({
                            name: 'setting',
                            url: './frame4/setting/index.html',
                            allowEdit:true,
                            pageParam: {}, //页面代参数
                            rect: {
                                x: 0,
                                y: 25,
                                w: api.winWidth,
                                h: api.winHeight
                            }
                        })">
                        <div class="title" style="margin: .2rem 0 0 0;" id="username"></div>
                    </div>
                </div>
                <div style="text-align: center; font-size:.8rem">
                    <div class="title">余额</div>
                    <div class="Ynum" id="yue"></div>
                    <div class="aubtn" id="yueBtn">充值</div>
                </div>
            </div>

            <div class="item">
                <div>
                    <div class="item-num" id="square"></div>
                    <div class="item-title">发布</div>
                </div>
                <div>
                    <div class="item-num" id="like"></div>
                    <div class="item-title">点赞</div>
                </div>
                <div>
                    <div class="item-num" id="comment"></div>
                    <div class="item-title">评论</div>
                </div>
                <div>
                    <div class="item-num" id="share"></div>
                    <div class="item-title">转发</div>
                </div>
            </div>
        </div>

        <!-- 当行菜单 -->
        <section class="aui-grid">
            <div class="aui-row">
                <div class="aui-col-xs-4" onclick="gotoItem('order')">
                    <div style="display: flex;justify-content: center;"><img style="height:2rem;" src="../image/img/order.png" alt=""></div>
                    <div class="aui-grid-label">我的订单</div>
                </div>
                <div class="aui-col-xs-4" onclick="gotoItem('vip')">
                    <div style="display: flex;justify-content: center;"><img style="height:2rem;" src="../image/img/vip.png" alt=""></div>
                    <div class="aui-grid-label">我的会员</div>
                </div>
                <div class="aui-col-xs-4" onclick="gotoItem('coupon')">
                    <div style="display: flex;justify-content: center;"><img style="height:2rem;" src="../image/img/coupon.png" alt=""></div>
                    <div class="aui-grid-label">我的卡券</div>
                </div>
                <div class="aui-col-xs-4" onclick="gotoItem('hezuo')">
                    <div style="display: flex;justify-content: center;"><img style="height:2rem;" src="../image/img/hezuo.png" alt=""></div>
                    <div class="aui-grid-label">商务合作</div>
                </div>
                <div class="aui-col-xs-4" onclick="gotoItem('aboutus')">
                    <div style="display: flex;justify-content: center;"><img style="height:2rem;" src="../image/img/about.png" alt=""></div>
                    <div class="aui-grid-label">关于我们</div>
                </div>
                <div class="aui-col-xs-4" onclick="gotoItem('setting')">
                    <div style="display: flex;justify-content: center;"><img style="height:2rem;" src="../image/img/setting.png" alt=""></div>
                    <div class="aui-grid-label">设置</div>
                </div>
                <div id="isUsertype" class="aui-col-xs-4" onclick="gotoItem('sjcenter')">
                    <div style="display: flex;justify-content: center;"><img style="height:2rem;" src="../image/img/shop.png" alt=""></div>
                    <div class="aui-grid-label">商家中心</div>
                </div>
            </div>
        </section>
    </div>

    <!-- 没有登录的时候显示去登录 -->
    <div class="nodata"></div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../lib/zepto.js"></script>
<script type="text/javascript" src="../script/dns.js"></script>
<script type="text/javascript" src="../script/aui-toast.js"></script>

<script>
    apiready = function() {
      api.addEventListener({
          name: "pay_reload"
      }, function(ret, err) {
          window.location.reload();
      });
      api.addEventListener({
          name: "signin_reload"
      }, function(ret, err) {
          window.location.reload();
      });
      api.addEventListener({
          name: "header_reload"
      }, function(ret, err) {
          window.location.reload();
      })
      getmeList();
      refreshList();
    };
    var toast = new auiToast({
    })
    // 登录
    $('.nodata').click(function(){
      toast.loading({
              title:"跳转中",
              duration:2000
          },function(ret){
              setTimeout(function(){
                  toast.hide();
              }, 3000)
          });
      setTimeout(function () {
        api.openWin({
            name: 'login',
            url: './system/login.html',
            allowEdit: true,
            pageParam: {}, //页面代参数
            rect: {
                x: 0,
                y: 0,
                w: api.winWidth,
                h: api.winHeight
            }
        });
      },1000)
    })

    // 获取个人中心信息
    function getmeList() {
      // 获取此时的毫秒数
      var newTime = new Date();
      var getnewTime = newTime.getTime();
      // 获取登陆时的毫秒数
      var getloginTime = localStorage.getItem("getloginTime");
      var Time = getnewTime-getloginTime;
      var token = localStorage.getItem("token");
      var cacheTime = localStorage.getItem("cacheTime");
      if(Time>cacheTime||!token){
        $('.member').hide();
        return;
      }
      $('.member').show();
      $('.nodata').hide();
      $.ajax({
        type:"get",
        dataType: 'json',
        beforeSend:function (request) {
          request.setRequestHeader("token",token)
        },
        url:dns + "user/read",
        success:function (res) {
          //  console.log(JSON.stringify(res));
           if(res.data.showRecharge == 'no'){
             $('#yueBtn').hide();
           }else{
             $('#yueBtn').show();
           }
           var jifen = res.data.user.integral;
           var yue = res.data.user.balance;
           $('#jifen').html(res.data.user.integral);
           $('#yue').html(res.data.user.balance);
           $('#username').html(res.data.user.nickname);
           $('#userlogo').attr('src',res.data.user.avatar.filepath);
           $("#square").html(res.data.square?res.data.square:'0');
           $("#like").html(res.data.like?res.data.like:'0');
           $("#comment").html(res.data.comment?res.data.comment:'0');
           $("#share").html(res.data.user.share?res.data.user.share:'0');
           res.data.message > 0 ?   $('.bots').show() : $('.bots').hide(); //未读消息状态显示
           res.data.user.level_type == 2 ? $('#isUsertype').show() : $('#isUsertype').hide(); //是否显示商家中心
           // 监听积分兑换
           api.addEventListener({
           name: 'jifen'
           }, function(ret, err) {
              //  console.log(JSON.stringify(ret.value));
              var integral = parseInt(ret.value.key1);
              var integral = jifen-integral;
              $('#jifen').html(integral)
           });
           // 监听余额兑换
           api.addEventListener({
           name: 'yue'
           }, function(ret, err) {
              //  console.log(JSON.stringify(ret.value));
              var balance = parseInt(ret.value.key2);
              var balance = yue-balance;
              $('#yue').html(balance)
           });
          //充值
           $('#yueBtn').click(function(){
             api.openWin({
                 name: 'money',
                 url: './frame4/money/index.html',
                 allowEdit:true,
                 pageParam: {'yue':res.data.user.balance} //页面代参数
             });
           })
        }
      })
    }

    //支付
    function pay () {
      api.openWin({
          name: 'pay',
          url: './pay/index.html',
          allowEdit:true,
          pageParam: {}, //页面代参数
          rect: {
              x: 0,
              y: 25,
              w: api.winWidth,
              h: api.winHeight
          }
      });
    }
    function gotoItem(item) {
        console.log(item)
        switch (item) {
            case 'order':
                api.openWin({
                    name: 'order',
                    url: './frame4/order/index.html',
                    allowEdit:true,
                    pageParam: {} //页面代参数
                });
                break;
            case 'vip':
                api.openWin({
                    name: 'vip',
                    url: './frame4/myVip/index.html',
                    allowEdit:true,
                    pageParam: {} //页面代参数
                });
                break;
            case 'coupon':
                api.openWin({
                    name: 'coupon',
                    url: './frame4/coupon/index.html',
                    allowEdit:true,
                    pageParam: {} //页面代参数
                });
                break;
            case 'hezuo':
                api.openWin({
                    name: 'hezuo',
                    url: './frame4/hezuo/swhz.html',
                    allowEdit:true,
                    pageParam: {

                    } //页面代参数
                });
                break;
            case 'aboutus':
                api.openWin({
                    name: 'aboutus',
                    url: './frame4/aboutus/index.html',
                    allowEdit:true,
                    pageParam: {} //页面代参数
                });
                break;
            case 'setting':
                api.openWin({
                    name: 'setting',
                    url: './frame4/setting/index.html',
                    allowEdit:true,
                    pageParam: {} //页面代参数
                });
                break;
            case 'sjcenter':
                api.openWin({
                    name: 'sjcenter',
                    url: './frame4/sjcenter/index.html',
                    allowEdit:true,
                    pageParam: {} //页面代参数
                });
                break;
            case 'exchange':
                api.openWin({
                    name: 'exchange',
                    url: './frame0/gift-bag.html',
                    allowEdit:true,
                    pageParam: {} //页面代参数
                });
                break;
                case 'message':
                $('.bots').hide();
                    api.openWin({
                        name: 'message',
                        url: './frame4/message/index.html',
                        allowEdit:true,
                        pageParam: {} //页面代参数
                    });
                    break;
        }
    }


    //该方法用来下拉刷新
    function refreshList() {
        // api.setRefreshHeaderInfo({
        //     visible: true, //是否可见，若设置为false，下拉区域不能隐藏且刷新界面为黑色，什么内容也看不到。
        //     bgColor: '#ccc', //背景色
        //     textColor: '#fff', //文本颜色
        //     textDown: '下拉刷新...', //下拉文字描述，默认值：下拉可以刷新
        //     textUp: '松开刷新...', //松开时文字描述，默认值：松开可以刷新
        //     textLoading: '加载中..', //加载状态文字描述
        //     //textTime:'',，//更新时间文字描述,默认格式为：最后更新+日期时间
        //     showTime: true //是否需显示更新时间
        // }, function(ret, err) {
        //     //alert("下拉刷新成功");
        //     api.refreshHeaderLoadDone(); //恢复默认状态
        //
        //     //重新加载当前页面
        //     window.location.reload();
        // });

        api.setCustomRefreshHeaderInfo({
              bgColor: '#eee',
              images: [
                'widget://image/xiaolong/1.png',
                'widget://image/xiaolong/2.png',
                'widget://image/xiaolong/3.png',
                'widget://image/xiaolong/4.png',
                'widget://image/xiaolong/5.png',
              ],
              tips: {
                  pull: '下拉刷新' + '\n',
                  threshold: '松开立即刷新' + '\n',
                  load: '正在刷新' + '\n'
              }
              }, function() {
                setTimeout(function(){
                   api.refreshHeaderLoadDone();
                    window.location.reload();
            }, 1000);
        });

    }
</script>

</html>
